<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	pageContext.setAttribute("basePath",request.getContextPath());
%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色列表</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${basePath }/static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="${basePath }/static/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="${basePath }/static/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="${basePath }/static/css/animate.css" rel="stylesheet"/>
    <link href="${basePath }/static/css/style.css" rel="stylesheet"/>
    <link href="${basePath }/static/ruoyi/css/ry-ui.css" rel="stylesheet"/>
    <link href="${basePath }/static/js/jconfirm/jquery-confirm.min.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        
        <div class="col-sm-12 select-table table-striped">

            <div class="bootstrap-table">
                <div class="fixed-table-toolbar">
                    <div class="bs-bars pull-left">
                        <div class="btn-group-sm" id="toolbar" role="group">
                            <button type="button" class="btn btn-primary role_add">
                                <i class="fa fa-plus"></i> 新增
                            </button>
                        </div>
                    </div>

                </div>
                <div class="fixed-table-container" style="padding-bottom: 0px;">
                    <div class="fixed-table-header" style="display: none;">
                        <table></table>
                    </div>
                    <div class="fixed-table-body">
                        <div class="fixed-table-loading" style="top: 41px; display: none;">正在努力地加载数据中，请稍候……</div>
                        <table id="bootstrap-table" data-mobile-responsive="true" class="table table-hover">
                            <thead>
                            <tr>
                                <th class="bs-checkbox " style="width: 36px; ">
                                    <div class="th-inner"><input name="btSelectAll" type="checkbox"></div>
                                </th>
                                <th>
                                    <div class="th-inner">角色编号</div>
                                </th>
                                <th>
                                    <div class="th-inner">角色名称</div>
                                </th>
                                <th>
                                    <div class="th-inner">权限字符</div>
                                </th>
                                <th>
                                    <div class="th-inner">描述</div>
                                </th>

                                <th style="text-align: center; ">
                                    <div class="th-inner ">操作</div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${query.list }" var="role">
                                	
                                	<tr data-index="${role.index }">
	                                    <td class="bs-checkbox ">
	                                        <input data-index="${role.roleId }" name="btSelectItem" type="checkbox">
	                                    </td>
	                                    <td>${role.roleId }</td>
	                                    <td>${role.roleName }</td>
	                                    <td>${role.roleKey }</td>
	                                    <td>${role.roleDecs }</td>
	                                    <td style="text-align: center; ">
		                                	<a class="btn btn-success btn-xs role_edit" data-id="${role.roleId }" href="javascript:void(0)">
		                                		<i class="fa fa-edit"></i>编辑
		                                	</a> 
		                                	<a class="btn btn-info btn-xs auth_user" data-id="${role.roleId }" data-name="${role.roleName }" href="javascript:void(0)">
		                                		<i class="fa fa-user"></i>分配用户
		                                	</a> 
		                                	<a class="btn btn-danger btn-xs role_delete" data-id="${role.roleId }" href="javascript:void(0)">
		                                		<i class="fa fa-remove"></i>删除
		                                	</a> 
		                                </td>
                                	</tr>                                	
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div class="fixed-table-pagination" style="display: block;">
                            <div class="pull-left pagination-detail">
                                <span class="pagination-info">第${query.pageNum }页，共${query.pages }页，共  ${query.total } 条记录。</span>
                            </div>
                            <c:if test="${query.total > query.navigatePages }">
                            	<div class="pull-right pagination">
                                <ul class="pagination pagination-outline">
                                    <c:choose>
									    <c:when test="${query.pageNum == 1 }"> 
									   		<li class="page-pre active">
		                                    	<a href="javascript:void(0)">‹</a>
		                                    </li>
									   	</c:when>
									   	<c:otherwise>
									   		<li class="page-pre">
		                                    	<a href="javascript:void(0)">‹</a>
		                                    </li>
									   	</c:otherwise>
									</c:choose>
                                    
                                    <c:forEach items="${query.navigateNums }" var="num">
                                    	<c:if test="${query.pageNum == num }">
                                    		<li class="page-number active">
                                    			<a href="javascript:void(0)">${num }</a>
                                    		</li>
                                    	</c:if>
                                    	<c:if test="${query.pageNum != num }">
                                    		<li class="page-number">
                                    			<a href="javascript:void(0)">${num }</a>
                                    		</li>
                                    	</c:if>
                                    </c:forEach>
                                    <c:if test="${query.pageNum == query.pages+1 }">
	                                    <li class="page-next active">
	                                    	<a href="javascript:void(0)">›</a>
	                                    </li>
                                    </c:if>
                                    <c:if test="${query.pageNum < query.pages }">
	                                    <li class="page-next">
	                                    	<a href="javascript:void(0)">›</a>
	                                    </li>
                                    </c:if>
                                </ul>
                            </div>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="${basePath }/static/js/jquery.min.js"></script>
<script src="${basePath }/static/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="${basePath }/static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="${basePath }/static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="${basePath }/static/ajax/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- jquery-export 表格导出插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/export/tableExport.js"></script>
<!-- 遮罩层 -->
<script src="${basePath }/static/js/jconfirm/jquery-confirm.min.js"></script>
<script src="${basePath }/static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="${basePath }/static/ajax/libs/iCheck/icheck.min.js"></script>
<script src="${basePath }/static/ajax/libs/layer/layer.min.js"></script>
<script src="${basePath }/static/ajax/libs/layui/layui.js"></script>
<script src="${basePath }/static/ruoyi/js/common.js"></script>
<script src="${basePath }/static/ruoyi/js/ry-ui.js"></script>

<script>

	//获取项目根目录
	function getRootPath(){
		let href = window.document.location.href;
		let pathName = window.document.location.pathname;
		let index = href.indexOf(pathName);
		let localhost = href.substring(0,index);
		let project = pathName.substring(0,(pathName.substr(1).indexOf('/'))+1);
			
		return (localhost+project);
	}
	
	let rootPath = getRootPath();
	
	$(".role_add").click(function(){
		$.modal.open('新增角色', rootPath+'/system/role/add.jsp');
	});

    $(".role_delete").click(function () {
    	let roleId = $(this).attr("data-id");  
        $.modal.confirm("确认删除该角色信息？", function() {
            $.modal.confirm("删除该角色信息将会设置当前角色用户为默认角色，确认删除？", function() {
                $.ajax({
                	url : rootPath+"/system/role/delete.do?roleId="+roleId,
                	type : "GET",
                	dataType : "json",
                    success : function (response) {
                    	layer.msg(response.message, {
                    	    icon: 1,
                    	    time: 2000,
                    	    shade: [0.1, '#8F8F8F']
                    	},function() {
                    		location.reload();
                    	});
                    }                	  
                });
            });
            
        });
    });

    $(".role_edit").click(function () {
    	let url = rootPath+'/system/role/get_role.do?roleId='+$(this).attr("data-id");
    	$.modal.open('编辑角色', url);
    });
    
    $(".auth_user").click(function () {
    	let url = rootPath+'/system/role/get_user.do?roleId='+$(this).attr("data-id");
    	$.modal.openTab('分配用户-'+$(this).attr("data-name"), url);
    });


</script>
</body>
</html>